import React, { useEffect } from 'react'
import { useDispatch, useSelector } from "react-redux"
import { StoreDispatch, ReducerType, ListItem } from "../../utils/Type"
import { getList, add, low } from "../../store/action"
import { checkedItem ,changeAll}from "../../store/action"
import MyItem from "../../components/MyItem"
import { SubmitBar, Checkbox } from "react-vant";
type Props = {}

const ShopCar = (props: Props) => {
  let dispatch: StoreDispatch = useDispatch()
  useEffect(() => {
    dispatch(getList())
  }, [dispatch])
  let shopList = useSelector((state: ReducerType) => state.shopList)
  const allChecked = useSelector((state: ReducerType) => state.allChecked)
  const sum = useSelector((state: ReducerType) => state.sum)
  return (
    <div>
      {
        shopList.length && shopList.map((item: ListItem, index: number) => {
          return <MyItem key={index} item={item} add={(id: string) => {
            dispatch(add(id))
          }} low={(id: string) => dispatch(low(id))} showCheck={true} checkboxItem={(id: string) => {
            dispatch(checkedItem(id))
          }}></MyItem>
        })
      }


      {
        shopList.length ?
          <SubmitBar
            price={sum * 100}
            buttonText="提交订单"
            className='submit-bar'
          >
            <Checkbox checked={allChecked} onChange={(checked) => {
              dispatch(changeAll(checked))
            }}>全选</Checkbox>
          </SubmitBar>
          : ''
      }
    </div>
  )
}

export default ShopCar